<template>
  <button id="city-btn" @click="handleClick">{{ city }}</button>
  <div id="map"></div>
</template>

<script setup>
import { useMapHook } from "./Hooks/useMapHook";
import { useCityStore } from "../../stores/city";
import { useHttpHook } from "./Hooks/useHttpHook";
import { useRouter } from "vue-router";
const $router = useRouter();
const { city } = useCityStore();
const handleClick = () => {
  $router.push("/city");
};
useMapHook();
useHttpHook();
</script>

<style scoped>
#map {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
#city-btn {
  width: 200px;
  height: 50px;
  position: fixed;
  z-index: 100;
  top: 20px;
  left: 50px;
}
</style>
